<template>
  <div class="login flex flex-col" ref="login">
    <div class="flex-1 flex items-center flexAround">
      <div class="login-card flex rounded-md">
        <div
          class="login-form flex flex-col justify-center px-10 py-10 flex-none mx-auto"
        >
          <!-- <div class="text-center text-3xl mb-8 fs20 loginTitle">
          </div> -->
          <el-form ref="formRef" :model="formData" size="large" :rules="rules">
            <el-form-item prop="account">
              <el-input
                v-model="formData.account"
                placeholder="请输入账号"
                @keyup.enter="handleEnter"
              >
                <template #prepend>
                  <icon name="el-icon-User" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                ref="passwordRef"
                v-model="formData.password"
                show-password
                placeholder="请输入密码"
                @keyup.enter="handleLogin"
              >
                <template #prepend>
                  <icon name="el-icon-Lock" />
                </template>
              </el-input>
            </el-form-item>
          </el-form>
          <div class="mb-5">
            <el-checkbox v-model="remAccount" label="记住账号"></el-checkbox>
          </div>
          <el-button
            class="enterBtn"
            type="primary"
            size="mini"
            :loading="isLock"
            @click="lockLogin"
            >登录</el-button
          >
        </div>
      </div>
      <div></div>
    </div>

    <layout-footer />
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref, shallowRef } from "vue";
import type { InputInstance, FormInstance } from "element-plus";
import LayoutFooter from "@/layout/components/footer.vue";
import useAppStore from "@/stores/modules/app";
import useUserStore from "@/stores/modules/user";
import cache from "@/utils/cache";
import { ACCOUNT_KEY } from "@/enums/cacheEnums";
import { PageEnum } from "@/enums/pageEnum";
import { useLockFn } from "@/hooks/useLockFn";

import * as THREE from "three";
import WAVES from "vanta/dist/vanta.NET.min";
const passwordRef = shallowRef<InputInstance>();
const formRef = shallowRef<FormInstance>();
const appStore = useAppStore();
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
const remAccount = ref(false);
const config = computed(() => appStore.config);
const formData = reactive({
  account: "",
  password: "",
});
const rules = {
  account: [
    {
      required: true,
      message: "请输入账号",
      trigger: ["blur"],
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: ["blur"],
    },
  ],
};
// 回车按键监听
const handleEnter = () => {
  if (!formData.password) {
    return passwordRef.value?.focus();
  }
  handleLogin();
};
// 登录处理
const handleLogin = async () => {
  await formRef.value?.validate();
  // 记住账号，缓存
  cache.set(ACCOUNT_KEY, {
    remember: remAccount.value,
    account: remAccount.value ? formData.account : "",
  });
  await userStore.login(formData);
  const {
    query: { redirect },
  } = route;
  const path = typeof redirect === "string" ? redirect : PageEnum.INDEX;
  router.push(path);
};
const { isLock, lockFn: lockLogin } = useLockFn(handleLogin);

const login = ref();
let vantaEffect;
onMounted(() => {
  const value = cache.get(ACCOUNT_KEY);
  if (value?.remember) {
    remAccount.value = value.remember;
    formData.account = value.account;
  }
  vantaEffect = WAVES({
    el: login.value,
    THREE: THREE,
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.0,
    minWidth: 200.0,
    scale: 1.0,
    scaleMobile: 1.0,
    points: 13.0,
    maxDistance: 23.0,
    spacing: 16.0,
    backgroundColor: 0x23153c,
    color1: 0xff3f81,
  });
});
onUnmounted(() => {
  if (vantaEffect) {
    vantaEffect.destroy();
  }
});
</script>

<style lang="scss" scoped>
.login {
  background-image: url(./../../assets/images/BackGround.gif);
  @apply min-h-screen bg-no-repeat bg-center bg-cover;
  height: 350px;
  /* opacity: 0.8; */
  border-radius: 10px;
  .login-card {
    width: 400px;
    height: 300px;
    margin: 0 auto;
    .login-form {
      border-radius: 10px;
      background: #ddd;
      opacity: 0.9;
      .loginTitle {
        font-size: 24px;
        font-weight: 600;
        font-family: "隶书";
      }
    }
  }
}
.py-10 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.px-10 {
  padding-left: 20px;
  padding-right: 20px;
}
.el-form-item--large {
  margin-bottom: 15px;
}
.enterBtn {
  //   width: 50%;
  //   margin: 0 auto;
}
</style>
